<script setup lang="ts">
import { getRecommendList } from '@/services/consult'
import type { ParamsConfig, RecommendRows } from '@/types/consult'
import { onMounted, ref } from 'vue'
import RecommendItem from './RecommendItem.vue'
import { useWindowSize } from '@vueuse/core'
import MoreDoctor from './MoreDoctor.vue'
const paramsConfig = ref<ParamsConfig>({
  current: 1,
  pageSize: 5
})
const list = ref<RecommendRows[]>([])
// 获取推荐关注的医生列表
const getRecommend = async () => {
  const data = await getRecommendList(paramsConfig.value)
  list.value.push(...data.data.rows)
}
// 轮播图的宽度不能直接写死，不然屏幕尺寸发生改变了之后，轮播图滑动的宽度仍然是写死的150px
// 这里应该按比例进行分配轮播图滑动的宽度 比例： 150 / 375 = 0.4
// 原生写法
/* const width = ref(150)
// 修改滑动宽度的方法
const setWidth = () => {
  width.value = (150 / 375) * window.innerWidth
} */
// 使用useVue工具
const { width } = useWindowSize()
onMounted(() => {
  // 获取推荐关注医生列表
  getRecommend()
  /*   // 组件一加载就进行滑动宽度设置
  setWidth()
  // 当屏幕尺寸发生变化时，也需要修改滑动宽度
  window.addEventListener('resize', setWidth) */
})
// 组件销毁时，需要移除监听事件
/* onUnmounted(() => {
  window.removeEventListener('resize', setWidth)
}) */
// 显示全部推荐关注医生的弹出层
const showPop = ref(false)
</script>

<template>
  <div class="recommond-list-page">
    <div class="recommend-head">
      <p>推荐关注</p>
      <a href="javascript:;" @click="showPop = true">
        <span>查看更多</span>
        <van-icon name="arrow" />
      </a>
    </div>
    <van-swipe
      :loop="false"
      :width="(150 / 375) * width"
      :show-indicators="false"
      duration="500"
    >
      <van-swipe-item v-for="item in list" :key="item.id">
        <recommend-item type="doc" :id="item.id" :item="item"> </recommend-item>
      </van-swipe-item>
    </van-swipe>
    <van-popup
      v-if="showPop"
      v-model:show="showPop"
      position="right"
      :style="{ height: '100%', width: '100%' }"
    >
      <more-doctor @closePop="showPop = !showPop"></more-doctor>
    </van-popup>
  </div>
</template>

<style lang="scss" scoped>
.recommond-list-page {
  background-color: #f6f7f9;
  padding-bottom: 15px;
  overflow: hidden;
  .recommend-head {
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    height: 45px;
    align-items: center;
    font-size: 13px;
    a {
      color: var(--cp-tip);
      font-size: 13px;
    }
  }
  .van-swipe {
    cursor: grab;
    overflow: hidden;
  }
}
</style>
